<template>
  <div class="home">
    <el-button @click="toggleSideBar">
      sideBar Toggle
    </el-button>
    <div class="block">
      <span class="demonstration">默认 Hover 指示器触发</span>
      <el-carousel height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">
            {{ item }}
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="block">
      <el-popconfirm title="这是一段内容确定删除吗？">
        <el-button slot="reference">
          删除
        </el-button>
      </el-popconfirm>
    </div>

    <div class="block">
      <el-button type="text" @click="centerDialogVisible = true">
        点击打开 Dialog
      </el-button>
      <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <span>需要注意的是内容是默认不居中的</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapActions } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {
      centerDialogVisible: false,
    }
  },
  methods: {
    ...mapActions({
      toggleSideBar: 'app/toggleSideBar',
    }),
  },
}
</script>

<style lang="scss" scoped>
.block {
  width: 400px;
  padding-top: 30px;
  margin: auto;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
